<template>
	<view>
		<view class="txt">
			人气推荐
		</view>
		<view v-for="(item,index) in arr" :key="item.id" class="boxs">
			<image :src="item.list_pic_url" mode="" class="left"></image>
			<view class="right">
				<text class="tx1">{{item.name}}</text>
				<text class="tx2">{{item.goods_brief}}</text>
				<text class="tx3">￥{{item.retail_price.toFixed(2)}}元</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['arr'],
		name: "reod",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.txt {
		width: 100%;
		height: 100rpx;
		// border: 1px solid black;
		// text-align: center;
		font-size: 20px;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.boxs {
		width: 100%;
		height: 200rpx;
		// border: 1px solid black;
		display: flex;
		background-color: rgb(250, 250, 250);
		margin: 10rpx 0;

		.left {
			width: 30%;
			height: 100%;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.tx1 {
				font-weight: 500;
				font-size: 18px;
			}

			.tx2 {
				font-size: 12px;
			}

			.tx3 {
				font-size: 10px;
				color: rgb(145, 9, 9);

			}
		}
	}
</style>
